/* 
  订单详细Form组件
 */

<template>
  <el-form
    :model="ruleForm"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
    disabled
  >
    <el-row>
      <!-- 订单编号 -->
      <el-col :span="12">
        <el-form-item label="订单编号" prop="orderNum">
          <el-input v-model="ruleForm.orderNum" disabled></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="路线名称" prop="product.productName">
          <el-input v-model="ruleForm.product.productName" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <!-- 出发城市 -->
      <el-col :span="12">
        <el-form-item label="出发城市" prop="product.cityName">
          <el-input v-model="ruleForm.product.cityName" disabled></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="出发人数" prop="peopleCount">
          <el-input v-model="ruleForm.peopleCount" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <!-- 出发城市 -->
      <el-col :span="12">
        <el-form-item prop="orderTime" label="下单时间" required>
          <el-date-picker
            v-model="ruleForm.orderTime"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy-mm-dd hh:MM:ss"
            value-format="timestamp"
            disabled
          ></el-date-picker>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="product.departureTime" label="出发时间" required>
          <el-date-picker
            v-model="ruleForm.product.departureTime"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy-mm-dd hh:MM:ss"
            value-format="timestamp"
            disabled
          ></el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item prop="orderDesc" label="其他信息">
      <el-input type="textarea" v-model="ruleForm.orderDesc"></el-input>
    </el-form-item>

    <!-- 分割线 -->
    <el-divider></el-divider>
    <el-alert title="旅客信息" type="success" center :closable="false" />

    <!-- 旅客信息 无法修改 -->
    <el-table :data="ruleForm.travellers" center style="width: 100%">
      <el-table-column align="center" prop="travellerType" label="人群" width="180">
        <template slot-scope="scope">{{ scope.row.travellerType == 0 ? '成人' : '儿童' }}</template>
      </el-table-column>

      <el-table-column align="center" prop="name" label="姓名" width="180" />

      <el-table-column prop="sex" label="性别" align="center" />

      <el-table-column prop="phoneNum" label="性别" align="center" />

      <el-table-column prop="credentialsType" label="证件类型" align="center">
        <template
          slot-scope="scope"
        >{{ scope.row.travellerType == 0 ? '身份证' : scope.row.travellerType == 1 ? '护照' : '军官证' }}</template>
      </el-table-column>

      <el-table-column prop="credentialsNum" label="证件号" align="center" />
    </el-table>

    <!-- 分割线 -->
    <el-divider></el-divider>
    <el-alert title="会员信息" type="success" center :closable="false" />

    <!-- 会员信息 无法修改 -->
    <el-table :data="[...ruleForm.member]" center style="width: 100%">
      <el-table-column align="center" prop="name" label="会员" width="180" />

      <el-table-column prop="nickname" label="昵称" align="center" />

      <el-table-column prop="phoneNum" label="手机号" align="center" />

      <el-table-column prop="email" label="邮箱" align="center" />
    </el-table>

    <!-- 分割线 -->
    <el-divider></el-divider>
    <el-alert title="支付信息" type="success" center :closable="false" />

    <!-- 费用支付方式 -->
    <el-row>
      <el-col :span="12">
        <el-form-item label="支付方式" prop="payType">
          <el-input :value="ruleForm.payType == 0 ? '微信' : ruleForm.payType == 1 ? '支付宝' : '其他'" disabled></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="费用" prop="product.productPrice">
          <el-input v-model="ruleForm.product.productPrice" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
// 请求
import { findOrderInfo } from '@/network/orderRequest.js'

export default {
  data() {
    return {
      ruleForm: {
        product: {},
        member: {},
        travellers: []
      },
    }
  },
  props: {
    id: String
  },
  methods: {
    /**
     * network: 订单详细
     */
    async orderDetail(id) {
      const { data, meta } = await findOrderInfo({ id })
      // console.log(data, meta)
      if (meta.status !== 200) {
        return this.$message({
          showClose: true,
          message: meta.msg,
          type: 'error'
        })
      }

      this.ruleForm = data.order
      // console.log(this.ruleForm.product.productName)
    }
  },
  created() {
    this.orderDetail(this.id) // 初始化网络请求
  }
}
</script>
